<template>
	<section class="aui-flexView">
		<!-- <header class="aui-navBar aui-navBar-fixed">
			<a href="javascript:;" class="aui-navBar-item">
				<i class="icon icon-return"></i>
			</a>
			<div class="aui-center">
				<span class="aui-center-title">我的订单</span>
			</div>
			<a href="javascript:;" class="aui-navBar-item">
				<i class="icon icon-sys"></i>
			</a>
		</header> -->
		<section class="aui-scrollView" v-show="showList">
			<div class="aui-tab" data-ydui-tab>
				<ul class="tab-nav">
					<block v-for="(menuTab,index) in menuTabs" :key="index">
						<li v-bind:id="'tabNum'+index" @click="swichMenu(index)" :class="[currentTab==index ? 'tab-nav-item tab-active' : 'tab-nav-item']">
							{{menuTab.name}}
						</li>
					</block>
				</ul>
				<div class="divHeight"></div>
				<div class="tab-panel">
					<block v-for="(menuList2,index2) in menuLists" :key="index2" >
						<div>
							<block :key="index3">
								<div class="tab-item">
									<div class="aui-well-item aui-well-item-clear">
										<!-- <div class="aui-well-item-hd">
											<img :src="menuList2.logoimg" alt="">
										</div> -->
										<div class="aui-well-item-bd">
											<h3>{{menuList2.supplierName}}</h3>
										</div>
										<div v-if="menuList2.state === '01'">
											待处理
										</div>
										<div v-if="menuList2.state === '02'">
											未出行
										</div>
										<div v-if="menuList2.state === '03'">
											已完成
										</div>
										<div v-if="menuList2.state === '04'">
											已取消
										</div>
										<span class="aui-well-item-fr" v-if="menuList2.state === '01'" @click="deleteOrderById(menuList2.id);"></span>
									</div>
									<div class="aui-mail-product" @click="goOrderDetailsPage(menuList2.id)">
										<a class="aui-mail-product-item">
											<div class="aui-mail-product-item-hd">
												<img :src="menuList2.productGuidePicUrl" alt="">
											</div>
											<div class="aui-mail-product-item-bd">
												<p>{{menuList2.productName}}</p>
											</div>
										</a>
									</div>
									<a href="javascript:;" class="aui-mail-payment">
										<p>
											<!-- 共{{menuList2.sum}}件商品 实付款: ￥{{menuList2.pri}} -->
											 成人{{menuList2.adultNumber}}人,儿童{{menuList2.childrenNumber}}人,单房差{{menuList2.singleRoomNumber}}间,共: ￥{{menuList2.orderTotal}}元
										</p>
									</a>
									<!-- <div class="aui-mail-button">
										<a href="javascript:;" :class="[menuList2.but_ddshouhuo==0 ? 'hd' : menuList2.but_ddshouhuo==2 ? '' :'aui-df-color']">等待收货</a>
										<a href="javascript:;" :class="[menuList2.but_wuliu==0 ? 'hd' : menuList2.but_wuliu==2 ? '' :'aui-df-color']">查看物流</a>
										<a href="javascript:;" :class="[menuList2.but_rebuy==0 ? 'hd' : menuList2.but_rebuy==2 ? '' :'aui-df-color']">再次购买</a>
										<a href="javascript:;" :class="[menuList2.but_pingjia==0 ? 'hd' : menuList2.but_pingjia==2 ? '' :'aui-df-color']">评价晒单</a>
										<a href="javascript:;" :class="[menuList2.but_fapiao==0 ? 'hd' : menuList2.but_fapiao==2 ? '' :'aui-df-color']">查看发票</a>
										<a href="javascript:;" :class="[menuList2.but_zhifu==0 ? 'hd' : menuList2.but_zhifu==2 ? '' :'aui-df-color']">去支付</a>
									</div> -->
								</div>
								<div :class="[index3+1==menuList.length ? 'hd':'divHeight']"></div>
							</block>
						</div>
					</block>
				</div>
			</div>
		</section>
		
		<div v-show="!showList">
			<form>
				<tui-list-cell>
					<view class="tui-line-cell">
						<view>{{productOrderDetails.productInfo.productName}}</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">出发城市：{{productOrderDetails.productInfo.startingCity}}</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">产品有效期：{{productOrderDetails.productInfo.startDate}}至{{productOrderDetails.productInfo.endDate}}</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">团期选择：</view>
						 <!-- <picker mode="date" :value="productOrder.setOutDate" @change="bindDateChange" :start="productInfo.startDate" :end="productInfo.endDate" >
						    <view class="uni-input">{{productOrder.setOutDate}}</view>
						 </picker> -->
						 {{productOrderDetails.productOrderInfo.setOutDate}}
					</view>
				</tui-list-cell>
				<!-- 日历组件 -->
				<view style="justify-content: flex-end;">
					<calendar  :selectedDate="selectedDate" :selected="selected" @change="calendarChange"/>
				</view>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title tui-flex-1">成人</view>
						<view class="tui-title tui-flex-1" style="color: red;">￥{{productOrderDetails.productOrderInfo.adultPrice}}元/人</view>
						<tui-numberbox :min="0" :max="100" :value="productOrderDetails.productOrderInfo.adultNumber" @change="setAdultNumber"></tui-numberbox>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title tui-flex-1">儿童</view>
						<view class="tui-title tui-flex-1" style="color: red;">￥{{productOrderDetails.productOrderInfo.childrenPrice}}元/人</view>
						<tui-numberbox :min="0" :max="100" :value="productOrderDetails.productOrderInfo.childrenNumber" @change="setChildrenNumber"></tui-numberbox>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title tui-flex-1">单房差</view>
						<view class="tui-title tui-flex-1" style="color: red;">￥{{productOrderDetails.productOrderInfo.singleRoomPrice}}元/间</view>
						<tui-numberbox :min="0" :max="100" :value="productOrderDetails.productOrderInfo.singleRoomNumber" @change="setSingleRoomNumber"></tui-numberbox>
					</view>
				</tui-list-cell>
				<!-- <tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">出行人：</view>
						<input placeholder-class="phcolor" class="tui-input" name="contactsName" placeholder="请输入出行人" maxlength="50" type="text" />
						<button class="tui-btn tui-btn-small tui-primary" hover-class="tui-primary-hover" @click="selectPeopleList">选择</button>
					</view>
				</tui-list-cell> -->
				<tui-swipe-action :actions="actions"  @click="handlerButton" v-for="(people,index) in productOrderDetails.productOrderPeopleList"
				 :key="index" :params="item">
					<template v-slot:content>
						<view class="list-item">
							<!-- <image :src="'../../../static/pedestrians/'+item.img" class="item-img" ></image> -->
							<image :src="'../../../static/pedestrians/man.png'" class="item-img" v-if="people.sex === '男'"></image>
							<image :src="'../../../static/pedestrians/woman.png'" class="item-img" v-if="people.sex === '女'"></image>
							<view class="item-box">
								<view class="item-title">
								   {{people.name}}
								   {{people.cardNumber}}
								   <!-- <view class="tui-title">出发日期：{{people.startDate}}</view> -->
								   <!-- <picker mode="date" :id="people.id" :value="people.startDate" @change="(e)=> bindStartDateChange(e)" :start="productInfo.startDate" :end="productInfo.endDate">
								      <view class="tui-title">出发日期：{{people.startDate}}</view>
								   </picker> -->
								</view>
							</view>
						</view>
					</template>
				</tui-swipe-action>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">订单总额/元：</view>
						<input placeholder-class="phcolor" class="tui-input" name="leavingMessage" placeholder="请输入订单总额" maxlength="50" type="text" v-model="productOrderDetails.productOrderInfo.orderTotal"/>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">联系人：</view>
						<input placeholder-class="phcolor" class="tui-input" name="contactsName" placeholder="请输入联系人" maxlength="50" type="text" v-model="productOrderDetails.productOrderInfo.contactsName"/>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">联系电话：</view>
						<input placeholder-class="phcolor" class="tui-input" name="contactNumber" placeholder="请输入联系电话" maxlength="50" type="text" v-model="productOrderDetails.productOrderInfo.contactNumber"/>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">联系邮箱：</view>
						<input placeholder-class="phcolor" class="tui-input" name="email" placeholder="请输入联系邮箱" maxlength="50" type="text" v-model="productOrderDetails.productOrderInfo.email"/>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">买家留言：</view>
						<input placeholder-class="phcolor" class="tui-input" name="leavingMessage" placeholder="请输入买家留言" maxlength="50" type="text" v-model="productOrderDetails.productOrderInfo.leavingMessage"/>
					</view>
				</tui-list-cell>
			</form>
			<view class="tui-btn-box">
				<button class="btn-primary" hover-class="btn-hover" formType="button" type="primary" @click="backOrderList">返回</button>
			</view>
		</div>
	</section>
</template>

<script>
	// const request = require("../../../../common/request.js")
	import tuiIcon from "../../components/icon/icon"
	import tuiTag from "../../components/tag/tag"
	import tuiBadge from "../../components/badge/badge.vue"
	import tuiNomore from "../../components/nomore/nomore"
	import tuiButton from "../../components/button/button"
	import tuiTopDropdown from "../../components/top-dropdown/top-dropdown"
	import tuiBottomPopup from "../../components/bottom-popup/bottom-popup"
	import tuiNumberbox from "../../components/numberbox/numberbox"
	import tuiDivider from "../../components/divider/divider"
	import tuiDropdownList from "../../components/dropdown-list/dropdown-list"
	import tuiListCell from "../../components/list-cell/list-cell"
	import tuiSwipeAction from "../../components/swipe-action/swipe-action"
	// import calendar from '../../components/calendar/calendar.vue'
	export default {
		components: {
			tuiIcon,
			tuiTag,
			tuiBadge,
			tuiNomore,
			tuiButton,
			tuiTopDropdown,
			tuiBottomPopup,
			tuiNumberbox,
			tuiDivider,
			tuiSwipeAction,
			tuiListCell,
			tuiDropdownList,
			calendar
		},
		data() {
			return {
				scrollLeft: 0,
				isClickChange: false,
				currentTab: 0,
				menuTabs: [
					{
						name: '全部'
					}, {
						name: '待处理'
					}, {
						name: '待出行'
					}, {
						name: '已完成'
					}, {
						name: '已取消'
					},
				],
				orderState:"0",
				openId:"",
				menuLists: [],
				productOrderDetails:{},
				showList:true,
				// 限定可选日期
				limitFlag: false, 
				selectedDate:[],
				/* 可选日期 */
				selected : [],
			}
		},
		onShow: function(options) {
			const openId = uni.getStorageSync('openId');
			this.openId=openId;
			const orderState = uni.getStorageSync('orderState');
			uni.removeStorageSync('orderState');
			if(orderState){
				this.swichMenu(orderState);
			}
			this.getOrderPageList(this.orderState,this.openId);
		},
		methods: {
			swichMenu: async function(current) { //点击其中一个选项
				if (this.currentTab == current) {
					return false;
				} else {
					//全部订单
					if(current==0){
						this.orderState="0";
					}
					//未处理订单
					else if(current==1){
						this.orderState="01";
					}
					//未出行订单
					else if(current==2){
						this.orderState="02";
					}
					//已完成订单
					else if(current==3){
						this.orderState="03";
					}
					//已取消订单
					else if(current==4){	
						this.orderState="04";
					}
					this.getOrderPageList(this.orderState,this.openId);
					this.currentTab = current;
					this.setScrollLeft(current);
				}
			},
			//按照状态查询订单
			getOrderPageList:function(state,openId){
				let data=request.request('/app/tourism/productOrder/getPageList',{
					method:"GET",
					data:{
						state:state,
						channelMerchantsId:openId,
						page:1,
						limit:10
					}
				});
				data.then((v)=>{
					if(v.list.length==0){
						uni.showToast({
							title: "暂无订单！！",
							icon: 'none',
							duration: 2000
						})
					}
					this.menuLists=v.list;
				});
			},
			swiperChange: async function(e) {
				let index = e.target.current;
				this.setScrollLeft(index);
				this.currentTab = index;
			},
			setScrollLeft: async function(tabIndex) {
				let leftWidthSum = 0;
				for (var i = 0; i <= tabIndex; i++) {
					let nowElement = await this.getWidth('tabNum' + i);
					leftWidthSum = leftWidthSum + nowElement.width;
				}
				let winWidth = uni.getSystemInfoSync().windowWidth;
				this.scrollLeft = leftWidthSum > winWidth ? (leftWidthSum - winWidth) : 0
			},
			getWidth: function(id) { //得到元素的宽高
				return new Promise((res, rej) => {
					uni.createSelectorQuery().select("#" + id).fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						res(data);
					}).exec();
				})
			},
			getDateList: function(tabIndex) {
				// var entity = this.menuTabs[tabIndex].name;
				// this.menuLists[tabIndex].push(entity);
			},
			goOrderDetailsPage:function(id){
				let that=this;
				let data=request.request('/app/tourism/productOrder/info',{
					method:"GET",
					data:{
						id:id
					}
				});
				data.then((v)=>{
					that.selectedDate=[];
					/* 可选日期 */
					that.selected=[];
					that.productOrderDetails=v;
					let setOutDate=v.productOrderInfo.setOutDate;
					let obj=new Object();
					obj.date=setOutDate;
					obj.info="￥"+v.productOrderInfo.adultPrice;
					that.selected[0]=obj;
					that.selectedDate[0]=setOutDate;
				});
				this.showList=false;
				// uni.navigateTo({
				// 	url: '/pages/order/orderDetails/orderDetails'
				// });
			},
			deleteOrderById:function(orderId){
				console.log(orderId);
			},
			backOrderList:function(){
				this.showList=true;
			}
		}
	}
</script>

<style>
	/* 公共样式表css */
	html,body {
	    color: #333;
	    margin: 0;
	    height: 100%;
	    font-family: "Myriad Set Pro","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;
	    -webkit-font-smoothing: antialiased;
	    -moz-osx-font-smoothing: grayscale;
	    font-weight: normal;
	}
	
	* {
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    box-sizing: border-box;
	}
	
	a {
	    text-decoration: none;
	    color: #000;
	}
	
	a, label, button, input, select {
	    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}
	
	img {
	    border: 0;
	}
	
	body {
	    background: #fff;
	    color: #666;
	}
	
	html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td {
	    margin: 0;
	    padding: 0;
	}
	
	a {
	    text-decoration: none;
	    color: #08acee;
	}
	
	button {
	    outline: 0;
	}
	
	img {
	    border: 0;
	}
	
	button,input,optgroup,select,textarea {
	    margin: 0;
	    font: inherit;
	    color: inherit;
	    outline: none;
	}
	
	li {
	    list-style: none;
	}
	
	a {
	    color: #666;
	}
	
	.clearfix::after {
	    clear: both;
	    content: ".";
	    display: block;
	    height: 0;
	    visibility: hidden;
	}
	
	.clearfix {
	}
	
	/* 必要布局样式css */
	.aui-flexView {
	    width: 100%;
	    height: 100%;
	    margin: 0 auto;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-orient: vertical;
	    -webkit-box-direction: normal;
	    -webkit-flex-direction: column;
	    -ms-flex-direction: column;
	    flex-direction: column;
	}
	
	.aui-scrollView {
	    width: 100%;
	    height: 100%;
	    -webkit-box-flex: 1;
	    -webkit-flex: 1;
	    -ms-flex: 1;
	    flex: 1;
	    overflow-y: auto;
	    overflow-x: hidden;
	    -webkit-overflow-scrolling: touch;
	    position: relative;
	    /* margin-top: -44px; */
	}
	
	.aui-navBar {
	    height: 44px;
	    position: relative;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: -ms-flexbox;
	    display: flex;
	    z-index: 1002;
	    background: #ffffff;
	}
	
	.aui-navBar:after {
	    content: '';
	    position: absolute;
	    z-index: 2;
	    bottom: 0;
	    left: 0;
	    width: 100%;
	    height: 1px;
	    border-bottom: 1px solid #ffffff;
	    -webkit-transform: scaleY(0.5);
	    transform: scaleY(0.5);
	    -webkit-transform-origin: 0 100%;
	    transform-origin: 0 100%;
	}
	
	.aui-navBar-item {
	    height: 44px;
	    min-width: 25%;
	    -webkit-box-flex: 0;
	    -webkit-flex: 0 0 25%;
	    -ms-flex: 0 0 25%;
	    flex: 0 0 25%;
	    padding: 0 0.9rem;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    -ms-flex-align: center;
	    align-items: center;
	    font-size: 0.7rem;
	    white-space: nowrap;
	    overflow: hidden;
	    color: #a0a0a0;
	    position: relative;
	}
	
	.aui-navBar-item:first-child {
	    -webkit-box-ordinal-group: 2;
	    -webkit-order: 1;
	    -ms-flex-order: 1;
	    order: 1;
	    margin-right: -25%;
	    font-size: 0.9rem;
	    font-weight: bold;
	}
	
	.aui-navBar-item:last-child {
	    -webkit-box-ordinal-group: 4;
	    -webkit-order: 3;
	    -ms-flex-order: 3;
	    order: 3;
	    -webkit-box-pack: end;
	    -webkit-justify-content: flex-end;
	    -ms-flex-pack: end;
	    justify-content: flex-end;
	}
	
	.aui-center {
	    -webkit-box-ordinal-group: 3;
	    -webkit-order: 2;
	    -ms-flex-order: 2;
	    order: 2;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-pack: center;
	    -webkit-justify-content: center;
	    -ms-flex-pack: center;
	    justify-content: center;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    -ms-flex-align: center;
	    align-items: center;
	    height: 44px;
	    width: 50%;
	    margin-left: 25%;
	}
	
	.aui-center-title {
	    text-align: center;
	    width: 100%;
	    white-space: nowrap;
	    overflow: hidden;
	    display: block;
	    text-overflow: ellipsis;
	    font-size: 0.95rem;
	    color: #3c3c3c;
	}
	
	.icon {
	    width: 20px;
	    height: 20px;
	    display: block;
	    border: none;
	    float: left;
	    background-size: 20px;
	    background-repeat: no-repeat;
	}
	
	.icon-return {
	    background-image: url("");
	}
	
	.icon-sys {
	    background-image: url("");
	}
	
	.tab-nav {
	    background: #FFFFFF;
	    height: 40px;
	    line-height: 40px;
	    /* border-radius: 80px; */
	    display: block;
	    /* margin: 0 auto; */
	    position: fixed;
		width: 100%;
		margin-bottom: 15%;
	    /* width: 185px; */
		z-index: 9999;
	}
	
	.tab-nav:after {
	    content: '';
	    position: fixed;
	    z-index: 2;
	    bottom: 0;
	    left: 0;
	    width: 100%;
	    height: 1px;
	    border-bottom: 1px solid #bbbbbb;
	    -webkit-transform: scaleY(0.5);
	    transform: scaleY(0.5);
	    -webkit-transform-origin: 0 100%;
	    transform-origin: 0 100%;
	}
	
	.tab-nav-item {
	    height: 40px;
	    line-height: 40px;
	    position: relative;
	    text-align: center;
	    color: #585858;
	    font-size: 0.9rem;
	    display: block;
	    float: left;
	    border-radius: 80px;
	    /* padding: 0 15px; */
	    width: 20%;
	    margin: 0 auto;
	}
	
	.tab-nav-item.tab-active {
	    /* background-color: #51bd03; */
	}
	
	.tab-nav-item.tab-active a {
	    color: #000000;
	    font-weight: bold;
	}
	
	.tab-nav-item a {
	    display: inherit;
	    color: inherit;
	    font-size: 0.8rem;
	    color: #464646;
	}
	
	.tab-panel {
	    position: relative;
	    overflow: hidden;
	}
	
	.tab-panel .tab-panel-item {
	    width: 100%;
	    position: absolute;
	    top: 0;
	    -webkit-transform: translateX(-100%);
	    transform: translateX(-100%);
	}
	
	.tab-nav-item.tab-active:before {
	    content: '';
	    width: 40%;
	    height: 0px;
	    position: absolute;
	    left: 50%;
	    bottom: 0;
	    margin-left: -20%;
	    z-index: 4;
	    background-color: #1296db;
	    border-radius: 120px;
	    border: 1px solid #1296db;
	}
	
	.tab-panel .tab-panel-item.tab-active ~ .tab-panel-item {
	    -webkit-transform: translateX(100%);
	    transform: translateX(100%);
	}
	
	.tab-panel .tab-panel-item.tab-active {
	    position: relative;
	    -webkit-transition: -webkit-transform .15s;
	    transition: -webkit-transform .15s;
	    transition: transform .15s;
	    transition: transform .15s, -webkit-transform .15s;
	    -webkit-transform: translateX(0);
	    transform: translateX(0);
	}
	
	.divHeight {
	    background: #f0f2f5;
	    width: 100%;
	    height: 10px;
		padding-top: 20px;
	}
	
	.aui-well-item {
	    padding: 20px 15px 20px 20px;
	    position: relative;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    align-items: center;
	}
	
	.aui-well-item-hd {
	    margin-right: .4em;
	    width: 19px;
	    height: 19px;
	    line-height: 19px;
	    text-align: center;
	}
	
	.aui-well-item-hd img {
	    width: 100%;
	    max-height: 100%;
	    vertical-align: top;
	    display: block;
	    border: none;
	    margin-top: 3px;
	}
	
	.aui-well-item-bd {
	    -webkit-box-flex: 1;
	    -webkit-flex: 1;
	    flex: 1;
	    min-width: 0;
	}
	
	.aui-well-item-bd h3 {
	    color: #333;
	    font-size: 0.9rem;
	    position: relative;
	    /* padding-left: 20px; */
	    font-weight: normal;
	    padding-bottom: 0;
	    text-align: left;
	}
	
	.aui-well-item-fr {
	    font-size: 0.85rem;
	    text-align: right;
	    color: #999999;
	    padding-right: 25px;
	    position: relative;
	}
	
	.aui-well-item-fr:after {
	    content: " ";
	    display: inline-block;
	    height: 18px;
	    width: 18px;
	    background-image: url("");
	    background-size: 18px;
	    top: -2px;
	    position: absolute;
	    top: 50%;
	    margin-top: -9px;
	    right: 0px;
	    border-radius: 2px;
	}
	
	.aui-mail-product {
	    background: #f7f7f7;
	    padding: 20px;
	    position: relative;
	    overflow: hidden;
	}
	
	.aui-mail-product-item {
	    /* padding: 15px; */
	    position: relative;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    align-items: center;
	}
	
	.aui-mail-product-item-hd {
	    margin-right: .8em;
	    width: 70px;
	    height: 70px;
	    line-height: 70px;
	    text-align: center;
	}
	
	.aui-mail-product-item-hd img {
	    width: 100%;
	    max-height: 100%;
	    vertical-align: top;
	}
	
	.aui-mail-product-item-bd {
	    -webkit-box-flex: 1;
	    -webkit-flex: 1;
	    flex: 1;
	    min-width: 0;
	}
	
	.aui-mail-product-item-bd p {
	    color: #404040;
	    font-size: 13px;
	    line-height: 1.4;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 3;
	}
	
	.aui-mail-payment {
	    padding: 10px 15px;
	    position: relative;
	    text-align: right;
	    font-size: 0.8rem;
	    color: #333;
	    overflow: hidden;
	    display: block;
	}
	
	.aui-mail-payment p em {
	    font-style: normal;
	}
	
	.aui-mail-payment p i {
	    font-size: 1.3rem;
	    font-style: normal;
	}
	
	.aui-mail-payment:after {
	    content: '';
	    position: absolute;
	    z-index: 2;
	    bottom: 0;
	    left: 0;
	    width: 100%;
	    height: 1px;
	    border-bottom: 1px solid #e2e2e2;
	    -webkit-transform: scaleY(0.5);
	    transform: scaleY(0.5);
	    -webkit-transform-origin: 0 100%;
	    transform-origin: 0 100%;
	}
	
	.aui-mail-button {
	    padding: 15px 20px 15px 0;
	    overflow: hidden;
	}
	
	.aui-mail-button a {
	    background: none;
	    border: 1px solid #f0250f;
	    color: #f0250f;
	    font-size: 0.8rem;
	    border-radius: 40px;
	    /* display: block; */
	    padding: 2px 14px;
	    /* display: inline-block; */
	    float: right;
	    margin-left: 8px;
	}
	
	.aui-mail-button .aui-df-color {
	    color: #333;
	    border: 1px solid #ddd;
	}
	
	.aui-well-wait {
	    text-align: right;
	    color: #f0250f;
	    font-size: 0.8rem;
	}
	
	.hd{
		display: none;
	}
	
	
	
	
	
	
	
	.tui-line-cell {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	
	.tui-title {
		line-height: 32rpx;
		flex-shrink: 0;
	}
	
	.tui-input {
		font-size: 32rpx;
		color: #333;
		padding-left: 20rpx;
		flex: 1;
	}
	
	.radio-group {
		margin-left: auto;
		transform: scale(0.8);
		transform-origin: 100% center;
		flex-shrink: 0;
	}
	
	.tui-radio {
		display: inline-block;
		padding-left: 28rpx;
		font-size: 36rpx;
		vertical-align: middle;
	}
	
	/** form **/
	.tui-btn-box {
		padding: 40rpx 50rpx;
		box-sizing: border-box;
	}
	
	.btn-gray {
		margin-top: 30rpx;
	}
	
	.tui-tips {
		padding: 30rpx;
		color: #999;
		font-size: 20rpx;
	}
	
	.container {
		background: #fff;
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.list-item {
		padding: 30upx 30upx;
		display: flex;
		align-items: item;
	}
	
	.item-img {
		height: 60upx;
		width: 60upx;
		margin-right: 20upx;
		display: block
	}
	
	.item-box {
		flex: 1;
		width: 70%;
		display: flex;
		flex-direction: column;
		justify-content: space-between
	}
	
	.item-title {
		font-size: 32upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	
	}
	
	.item-time {
		color: #999;
		font-size: 24upx;
	}
	
	
	.tui-btn-box {
		padding: 40rpx 50rpx;
		box-sizing: border-box;
	}
	
	
	
	/** form **/
	.tui-line-cell {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	
	.tui-title {
		line-height: 32rpx;
		flex-shrink: 0;
	}
	
	.tui-input {
		font-size: 32rpx;
		color: #333;
		padding-left: 20rpx;
		flex: 1;
	}
	
	.radio-group {
		margin-left: auto;
		transform: scale(0.8);
		transform-origin: 100% center;
		flex-shrink: 0;
	}
	
	.tui-radio {
		display: inline-block;
		padding-left: 28rpx;
		font-size: 36rpx;
		vertical-align: middle;
	}
	
	/** form **/
	.tui-btn-box {
		padding: 40rpx 50rpx;
		box-sizing: border-box;
	}
	
	.btn-gray {
		margin-top: 30rpx;
	}
	
	.tui-tips {
		padding: 30rpx;
		color: #999;
		font-size: 24rpx;
	}
	
	/* icon 也可以使用组件*/
	@import "../../../static/style/icon.css";	
	@import '../../../static/style/thorui.css';
	/*底部操作栏*/
	
	.tui-col-7 {
		width: 58.33333333%;
	}
	
	.tui-col-5 {
		width: 41.66666667%;
	}
	
	.tui-operation {
		width: 100%;
		height: 100upx;
		/* box-sizing: border-box; */
		background: rgba(255, 255, 255, 0.98);
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 10;
		bottom: 0;
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}
	
	.tui-operation::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		border-top: 1upx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}
	
	.tui-operation-left {
		display: flex;
		align-items: center;
	}
	
	.tui-operation-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
	}
	
	.tui-operation-text {
		font-size: 22upx;
		color: #333;
	}
	
	.tui-opacity {
		opacity: 0.5;
	}
	
	.tui-scale-small {
		transform: scale(0.9);
		transform-origin: center center;
	}
	
	.tui-operation-right {
		height: 100upx;
		/* box-sizing: border-box; */
		padding-top: 0;
	}
	
	.tui-right-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.tui-btnbox-4 .tui-btn-class {
		width: 90% !important;
		display: block !important;
		font-size: 28upx !important;
	}
	
	.tui-operation .tui-badge-class {
		position: absolute;
		top: -6upx;
		/* #ifdef H5 */
		transform: translateX(50%)
		/* #endif  */
	}
	
	.tui-flex-1 {
		flex: 1;
	}
	
	/*底部操作栏*/
	
	
	
	.tui-line-cell {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	
	.tui-title {
		line-height: 32rpx;
		flex-shrink: 0;
	}
	
	.tui-input {
		font-size: 32rpx;
		color: #333;
		padding-left: 20rpx;
		flex: 1;
	}
	
	.radio-group {
		margin-left: auto;
		transform: scale(0.8);
		transform-origin: 100% center;
		flex-shrink: 0;
	}
	
	.tui-radio {
		display: inline-block;
		padding-left: 28rpx;
		font-size: 36rpx;
		vertical-align: middle;
	}
	
	/** form **/
	.tui-btn-box {
		padding: 40rpx 50rpx;
		box-sizing: border-box;
	}
	
	.btn-gray {
		margin-top: 30rpx;
	}
	
	.tui-tips {
		padding: 30rpx;
		color: #999;
		font-size: 20rpx;
	}
	
	.container {
		background: #fff;
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.list-item {
		padding: 30upx 30upx;
		display: flex;
		align-items: item;
	}
	
	.item-img {
		height: 60upx;
		width: 60upx;
		margin-right: 20upx;
		display: block
	}
	
	.item-box {
		flex: 1;
		width: 70%;
		display: flex;
		flex-direction: column;
		justify-content: space-between
	}
	
	.item-title {
		font-size: 32upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	
	}
	
	.item-time {
		color: #999;
		font-size: 24upx;
	}
	
	
	.tui-btn-box {
		padding: 40rpx 50rpx;
		box-sizing: border-box;
	}
	
	
	
	/** form **/
	.tui-line-cell {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	
	.tui-title {
		line-height: 32rpx;
		flex-shrink: 0;
	}
	
	.tui-input {
		font-size: 32rpx;
		color: #333;
		padding-left: 20rpx;
		flex: 1;
	}
	
	.radio-group {
		margin-left: auto;
		transform: scale(0.8);
		transform-origin: 100% center;
		flex-shrink: 0;
	}
	
	.tui-radio {
		display: inline-block;
		padding-left: 28rpx;
		font-size: 36rpx;
		vertical-align: middle;
	}
	
	/** form **/
	.tui-btn-box {
		padding: 40rpx 50rpx;
		box-sizing: border-box;
	}
	
	.btn-gray {
		margin-top: 30rpx;
	}
	
	.tui-tips {
		padding: 30rpx;
		color: #999;
		font-size: 24rpx;
	}
	
	
	
	
	
	.page_content{
		background-color: #a5b4c4;
		display: flex;
		height: calc(100vh);
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-weight: 600;
		font-size: 22px;
	}
	.masking_layer{
		background-color: #a5b4c4;
		display: flex;
		height: calc(100vh);
		flex-direction: column;
		justify-content: flex-end;
	}
	.price_total{
		flex-direction: row;
		align-items: Center;
		background-color: #ffffff;
		box-shadow: 5px 0px 15px #aaaa7f;
	}
</style>